<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-03-14 14:06:53
 * @Description  : 用户使用统计页面
-->
<template>
  <n-grid
    cols="1 xs:1 s:1 m:2 l:2 xl:2 2xl:2"
    x-gap="12"
    y-gap="12"
    responsive="screen"
  >
    <n-gi class="h-[70vh] flex justify-center">
      <pie-chart
        chart-id="singer-user-space-chart"
        :target-type="1"
        :target-id="userStore.userInfo?.id || '-1'"
        :is-admin="false"
        :sub-title="userStore.userInfo?.username || ''"
        :size="'large'"
      ></pie-chart>
      <n-divider vertical class="h-full" />
    </n-gi>

    <n-gi class="h-[70vh] my-time-line">
      <MyTimeLine :data="logs" @source-click="handleSourceClick"></MyTimeLine>
      <n-pagination
        class="mt-2"
        :label="pagination.label"
        :page="pagination.page"
        :page-size="pagination.pageSize"
        :size="pagination.size"
        :page-slot="pagination.pageSlot"
        :show-size-picker="pagination.showSizePicker"
        :suffix="pagination.suffix"
        :page-sizes="pagination.pageSizes"
        :item-count="pagination.itemCount"
        @update:page="pagination.onChange"
        @update:page-size="pagination.onUpdatePageSize"
      />
    </n-gi>
  </n-grid>
  <MyDialog
    default-width="90%"
    default-height="90%"
    v-if="dialogs.explorer"
    @close="dialogs.explorer = false"
  >
    <template #title>
      <div class="flex items-center text-[#555] text-[13px]">个人空间</div>
    </template>
    <Explorer></Explorer>
  </MyDialog>
</template>

<script setup lang="ts">
import { type PaginationProps } from 'naive-ui'
import useUserStore from '@/stores/modules/user'
import { getUserLogByPage } from '@/api/log'
import { load } from '@/utils/loading'
import Explorer from '../../Explorer/index.vue'
import { events } from '@/utils/bus'
const userStore = useUserStore()

import { h } from 'vue'

import type { LogRes } from '@/types/log'
import { MyTimeLine } from '@/utils/MyTimeLine'
import { navTypeList } from '@/constants/explorer'

const pagination = reactive<PaginationProps>({
  page: 1,
  pageSize: 50,
  size: 'small',
  pageCount: 3,
  itemCount: 150,
  pageSlot: 7,
  showSizePicker: true,
  label: (info) => {
    return h(
      NButton,
      {
        type: info.active ? 'primary' : 'tertiary',
        secondary: !info.active,
        style: {
          width: '100%',
          height: '100%'
        }
      },
      { default: () => info.node }
    )
  },
  suffix({ itemCount }) {
    return `${itemCount}条记录`
  },
  pageSizes: [
    {
      label: '10条/每页',
      value: 10
    },
    {
      label: '50条/每页',
      value: 50
    },
    {
      label: '100条/每页',
      value: 100
    },
    {
      label: '200条/每页',
      value: 200
    },
    {
      label: '500条/每页',
      value: 500
    },
    {
      label: '1000条/每页',
      value: 1000
    },
    {
      label: '2000条/每页',
      value: 2000
    }
  ],
  onChange: (page: number) => {
    pagination.page = page
    // emits('pageChange', page, undefined)
    loadSourceLogs()
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize
    pagination.page = 1
    // emits('pageChange', 1, pageSize)
    loadSourceLogs()
  }
})

const dialogs = reactive({
  explorer: false
})

const logs = ref<LogRes[]>([])

// 获取资源日志
const loadSourceLogs = () => {
  load.show()
  getUserLogByPage({
    page: pagination.page,
    pageSize: pagination.pageSize
  })
    .then((res) => {
      logs.value = res.data.items
      pagination.pageCount = res.data.pages as any
      pagination.itemCount = res.data.total as any
    })
    .catch(console.error)
    .finally(() => {
      load.hide()
    })
}

onMounted(() => {
  loadSourceLogs()
})

const handleSourceClick = (sourceInfo: any) => {
  // 打开explorer对话框
  dialogs.explorer = true
  setTimeout(() => {
    if (+sourceInfo.isDir === 0) {
      events.emit('node-click', {
        nav: {
          key: sourceInfo.parentId,
          label: sourceInfo.filename,
          myType: navTypeList.SOURCE
        },
        sourceInfo
      })
      return
    }
    // 文件夹处理
    events.emit('node-click', {
      nav: {
        key: sourceInfo.id,
        label: sourceInfo.filename,
        myType: navTypeList.SOURCE
      }
    })
  }, 300)
}
</script>

<style scoped lang="scss">
.my-time-line {
  :deep(.list-item-a) {
    background: #f6f9ff;
    color: #789;
    border: 1px solid #dbf1ff;
    padding: 5px;
    margin: 0 0 10px 0px;
    position: relative;
    min-height: 35px;
    line-height: 1.4em;
    border-radius: 4px;
    word-break: break-word;
  }

  :deep(.n-pagination .n-pagination-item) {
    padding: 0 !important;
    border: 0;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px;

    & .n-button {
      height: 100%;
      width: 100%;
      min-width: 25px;
      min-height: 25px;
      padding: 0;
      margin: 0;
    }
  }
}
</style>
